<template>
  <div>
    <!--工具类-->

    <Row style="text-align: left">
      <i-col span="24">
        <div style="margin-top: 0.8rem" class="y_query_right">
          <Input v-model.trim="params.name" placeholder="快递公司名称" clearable class="form_input y_condition" style="width:180px;"></Input>
          <Button type="primary" icon="ios-search" @click="search" class="y_condition">查询</Button>
          <Button type="error" icon="md-add" class="tiy_btn y_condition" @click="showCompanyEditModal" style="float:right;">添加快递公司</Button>
        </div>
      </i-col>
    </Row>

    <!--表格和分页-->
<!--    <Table stripe border :columns="tableTitles" :data="companyList" ref="companyList"-->
<!--           class="table_css" no-data-text="暂无数据"></Table>-->

    <List style="border-top: 1px solid #e8eaec;border-bottom: 1px solid #e8eaec;margin-top: 1rem;margin-bottom: 1rem;">
      <template v-if="companyList.length == 0">
        <ListItem><div style="width: 100%; text-align: center;">暂无数据</div></ListItem>
      </template>
      <list-item class="list_item" v-for="(item,index) in companyList">
        <div style="width:100%;padding: 0 0.5rem;"  >
          <Row type="flex" justify="space-between">
            <i-col flex="auto" style="text-align: left" >

              <KeyValueView>#{{index+1}}</KeyValueView>
              <KeyValueView title="公司名称" >{{item.name}}</KeyValueView>
              <KeyValueView title="运送方式" >
                <tag :color="item.method===100?'green':'red'">{{item.method===100?'普通快递':'商业快递'}}</tag>
              </KeyValueView>
              <KeyValueView title="访问方式" >{{item.accessWay===100?'Html页面':'Api接口'}}</KeyValueView>
              <KeyValueView title="实现类" >{{item.className}}</KeyValueView>
              <KeyValueView title="创建时间" >{{ $tiyBJTime(item.createtime) }}</KeyValueView>
            <span style="float: right;">
              <Button ghost size="small" icon="md-create" type="primary" @click="showCompanyEditModal(item)" style="margin-right: 0.5rem">编辑</Button>
              <Button ghost size="small" icon="md-trash" type="error"  @click="confirmDeleteCompany(item.id,item.name)" >删除</Button>
            </span>
            </i-col>
          </Row>
        </div>
      </list-item>
    </List>

    <div style="float: right;">
      <Page :total="tPage.total" :page-size="tPage.stepNumber" :current="tPage.currentPage" @on-change="changePage"
            @on-page-size-change="sizeChange" :page-size-opts="[20,40]"
            show-sizer show-elevator/>
    </div>

    <!--维护快递公司信息弹出框-->
    <Modal v-model="status.modalEditCompany.isShow" title="快递公司" @on-ok="actionOk"
           :styles="{align:'center',width:'60%',padding:'2rem'}" :scrollable=true >
      <Form ref="companyInfo" :model="params.companyInfo" :label-width="120" class="modal_newuser_form">
        <div class="modal_base_div" style="margin-top:0px !important; ">
          <FormItem label="公司名称 :" prop="name">
            <Input v-model.trim="params.companyInfo.name" style="width: 80%" ></Input>
          </FormItem>
          <FormItem label="英文名 :" prop="enName">
            <Input v-model.trim="params.companyInfo.enName" style="width: 80%"></Input>
          </FormItem>
          <FormItem label="运送方式 :" prop="method">
            <Select class="form_input"  v-model="params.companyInfo.method">
              <Option :value=100>普通快递</Option>
              <Option :value=101>商业快递</Option>
            </Select>
          </FormItem>
          <FormItem label="公司图标 :" prop="icon">
            <Input v-model.trim="params.companyInfo.icon" style="width: 80%"></Input>
          </FormItem>
          <FormItem label="访问方式 :" prop="accessWay">
            <Select class="form_input" v-model="params.companyInfo.accessWay">
              <Option :value=100>html页面</Option>
              <Option :value=200>Api接口</Option>
            </Select>
          </FormItem>
          <FormItem label="接口类 :" prop="className">
            <Input v-model.trim="params.companyInfo.className" style="width: 80%"></Input>
          </FormItem>
          <FormItem label="接口地址 :" prop="apiUrl">
            <Input v-model.trim="params.companyInfo.apiUrl" type="textarea" rows="3" style="width: 80%"></Input>
          </FormItem>
        </div>
      </Form>
  </Modal>

  </div>
</template>

<!--javascript 代码-->
<script>
  import tiyData from "./js/deliveryCompany/deliveryCompany_data"
  import {
    init,
    webList,
    submitCompanyInfo,
    deleteCompany
  } from "./js/deliveryCompany/deliveryCompany_funs"
  import KeyValueView from "../widgets/KeyValueView";

  export default {
    data(){
      return {
        openCollapse: "0",
        tPage: tiyData.tPage,
        status: tiyData.tStatus,
        //搜索条件
        params: tiyData.tParams,
        //字典 配送方式
        postageMethodDict : this.$store.getters.dictionaries.postageMethodDict,
        tData: tiyData.tData,
        companyList: tiyData.tData.companyList,
        tableTitles:tiyData.tTable(this)
      }
    },
    components:{KeyValueView},
    computed : {

    },
    methods: {

      search(){
        tiyData.tPage.currentPage = 1;
        webList(this, tiyData);
      },
      changePage(page){
        tiyData.tPage.currentPage = page;
        webList(this, tiyData);
      },
      sizeChange(p){
        tiyData.tPage.stepNumber = p;
        webList(this, tiyData);
      },
      showCompanyEditModal(companyInfo){
        if(companyInfo){
            tiyData.tParams.companyInfo = companyInfo;
        } else {
          tiyData.tParams.companyInfo.id="";
          tiyData.tParams.companyInfo.name="";
          tiyData.tParams.companyInfo.accessWay=200;
          tiyData.tParams.companyInfo.apiUrl="";
          tiyData.tParams.companyInfo.className="";
          tiyData.tParams.companyInfo.method=100;
          tiyData.tParams.companyInfo.enName="";
          tiyData.tParams.companyInfo.icon="";
        }
        this.status.modalEditCompany.isShow = true;
      },
      actionOk(){
          submitCompanyInfo(this, tiyData);
      },
      confirmDeleteCompany(id, name){
        this.$Modal.confirm({
          title: "确认",
          content: "确认删除快递公司接口？删除后无法找回！",
          onOk: () => {
              deleteCompany(this, tiyData, id, name);
          }
        });
      }
    },
    mounted(){
      init(this, tiyData);
      // webList(this, tiyData);
    }
  }
</script>

<!--css样式-->
<style scoped lang="less">
@import  (once,optional)  "../css/base.less";

  .table_css {
    margin: 1rem 0px;
  }

  .modal_newuser_form {
    padding-left: 60px;
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .form_input {
    width: 120px;
    margin-right: 10px;

  }
  .key{
   .tiy_key;
  }

.list_item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.list_item:hover {
  background: @tiySectionColor;
}
</style>
